<template>
  <div class="Emergency">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EWManagement' }">预警管理</el-breadcrumb-item>
        <el-breadcrumb-item>预警信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="Emergency-center">
      <div class="Emergency-dt">
        <MapContent :mapData="mapData" :mapZoom="6" />
      </div>
      <div class="Emergency-tb">
        <div class="Emergency-tb-bd">
          <el-form :inline="true" :model="formInline" size="small" label-width="80px">
            <div class="flexBetweens">
              <el-form-item label="影响时间：" label-width="100px" class="half">
                <el-date-picker type="date" placeholder="选择日期" v-model="formInline.startTime" style="width: 100%"
                  value-format="yyyy-MM-dd" :picker-options="endPickerOptions">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="至" label-width="30px" class="half">
                <el-date-picker type="date" placeholder="选择日期" v-model="formInline.endTime" style="width: 100%"
                  value-format="yyyy-MM-dd" :picker-options="startPickerOptions">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button size="small" type="primary" @click="bntHandels">查询</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="Emergency-tb-bt">
          <div class="Emergency-tb-bt-titel">
            <div class="Emergency-tb-bt-top">预警信息统计</div>
            <div class="Emergency-tb-bt-center customSelect">
              <!-- <el-form slot="filter" class="form" ref="form" :model="form" inline size="small" label-width="140px">
                <el-form-item v-for="(item, index) in formData" :key="index" :prop="item.id">
                  <LsdForm :compData="item" :form="form" @node-click="deptChoose(arguments, item)"
                    popper-class="customSelect" />
                </el-form-item>
              </el-form> -->
              <SelectOptions :value="sign" :options="Seleoptions" @change="selectChange" />
            </div>
          </div>
          <div class="Emergency-tb-bt-bottom-tb" style="position: relative;">
            <div v-show="shows" id="RightLine" style="width:44%; height: 80%">
              <!-- <Pie3dCharts :optionData="optionData" :totalData="{ text: '总数', num: 10 }" charId="yjxxcharId1" :pieOptions="{ innerSize: 160, subtitleY: 150, depth: 90 }" :colorList="colorList"></Pie3dCharts> -->
            </div>
            <div v-show="shows" class="legend_pie">
              <div>
                <div>
                  <span class="pie_bottom" style="background: #fa585a;margin-right:5px;"></span>
                  <span>红色</span>
                </div>
                <div style="margin-top:10px;">
                  <span class="pie_bottom" style="background: #FDDD67;margin-right:5px;"></span>
                  <span>黄色</span>
                </div>

              </div>
              <div style="margin-left:40px;">
                <div>
                  <span class="pie_bottom" style="background: #F59066;margin-right:5px;"></span>
                  <span>橙色</span>
                </div>
                <div style="margin-top:10px;">
                  <span class="pie_bottom" style="background: #148AF3;margin-right:5px;"></span>
                  <span>蓝色</span>
                </div>
              </div>
            </div>
            <div id="Car" :style="{ width: shows ? '56%' : '100%', height: '100%' }">
              <BarCharts :option="option3" chartId="zwtzsd5" barChartsId="zwtzsd6" v-if="showBarChartsy">
              </BarCharts>
            </div>
            <!-- <div id="zzt" style="width: 56%; height: 100%">
              <BarChartsNewVue :option="option3" chartId="zwtzsd1" barChartsId="zwtzsd1" v-if="showBarChartsy">
              </BarChartsNewVue>

            </div> -->

          </div>
        </div>
      </div>
      <div class="Emergency-tb-zzt">
        <div class="Emergency-tb-bt-titel">
          <div class="Emergency-tb-bt-top">预警信息</div>
          <div class="Emergency-tb-bt-bottom" style="color: #fff;" @click="goList">更多<i class="el-icon-d-arrow-right"
              color="#fff"></i></div>
        </div>
        <!-- 列表表格 -->
        <el-table :row-style="{ background: '#18283a' }" max-height="210px" :header-cell-style="{
          background: '#235ED2',
          color: '#fff',
          border: 'none',
          fontSize: '17px',
          'text-align': 'center'
        }" stripe ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" size="small">
          <el-table-column label="序号" type="index" align="center" width="60">
          </el-table-column>
          <el-table-column prop="warningInfo" label="预警信息" align="left" min-width="180px" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="dangerName" align="center" label="险情类别">
          </el-table-column>
          <el-table-column prop="warningLvName" align="center" label="预警级别">
          </el-table-column>
          <el-table-column prop="effectRange" label="影响范围" align="center" min-width="92px" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="effectEndTime" label="影响时间" align="left" min-width="100px" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.effectStartTime }}至{{ scope.row.effectEndTime }}
            </template>
          </el-table-column>
          <el-table-column prop="infoSourceName" label="信息来源" align="center">
          </el-table-column>
          <el-table-column prop="warningNoticeName" align="left" min-width="300px" label="关联预警通知单" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="warningInfoStatus" align="center" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.warningInfoStatus === '0'">编辑中</span>
              <span v-else-if="scope.row.warningInfoStatus === '1'">未处理</span>
              <span v-else-if="scope.row.warningInfoStatus === '2'">已处理</span>
            </template>
          </el-table-column>
        </el-table>

      </div>
    </div>
  </div>
</template>
<script>
import { listPages, getStatistics } from "@/api/EarlyWarningManagement/yjxxsj";
import MapContent from "./components/mapContent.vue";
import { getLevelCitys } from "@/api/common";
// import Pie3dCharts from "@/components/highCharts/HighChartsPie3d";
// import BarCharts from "@/components/highCharts/BarCharts.vue";
import SelectOptions from "@/components/selectOptions.vue";
import BarCharts from "../EWInformation/components/BarCharts.vue";
export default {
  name: "Emergency",
  components: { MapContent, BarCharts, SelectOptions },
  data() {
    return {
      showBarChartsy: false,
      formInline: {
        startTime: "",
        endTime: ""
        // endTime: "2023-01-12",
      },
      form: {},
      colorList: ["#fa585a", "#FDDD67", "#F59066", "#148AF3"],
      isShowBarChart: false,
      option: {
        barWidth: 56, // 柱子宽度
        basePointX: 24,
        ylib: 18, // y1点距离底部距离
        offsetHeight: 14, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        canvasH: "84%",
        qyNum: 5,
        bdHeight: "12%",
        tooltipXandY: {
          ch1: 140,
          ch2: 60,
          ch3: 90
        },
        grid: {
          left: 60, // 左边距离
          right: 10, // 右边距离
          top: 40,
          bottom: 6,
          containLabel: true
        },
        legends: ["蓝色", "黄色", "橙色", "红色"],
        legendPosition: "",
        legFontSize: 12,
        tooltipdw: "",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: [
            ],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "数量",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: [[33, 13], [27, 8], [24, 11], [28, 15], [10, 10], [14, 6]]
      },
      optionData: [["红色", 1], ["橙色", 2], ["黄色", 3], ["蓝色", 4]],
      formData: [
        {
          elType: "selectTree",
          id: "unitName",
          name: "unitId",
          label: "发布单位部门",
          attrs: {
            value: "",
            clearable: true,
            "collapse-tags": true
          },
          options: {
            attrs: {
              value: ""
            }
          },
          treeData: {
            attrs: {
              data: []
            },
            props: {
              children: "children",
              label: "orgName",
              value: "id"
            }
          }
        }
      ],
      tableData: [],
      options: [],
      value: "gwhbdlyxgsyjb",
      pie: null, // 饼图
      shengji_bar: null,
      isShow: true,
      mapData: [],
      one_data: [],
      two_data: [],
      three_data: [],
      four_data: [],
      xAxis_data: [],
      data: [
        ["", 0],
        ["", 0],
        ["", 0],
        ["", 0]
      ],
      pie_total: null,
      map: null,
      geo: null,
      geocodingTask: null,
      zoom: 5.9,
      show: true,
      shows: true,
      option3: {
        barWidth: 36, // 柱子宽度
        basePointX: 40,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 8, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        canvasH: "90%",
        bdHeight: "10%",
        qyNum: 5,
        tooltipXandY: {
          ch1: 80,
          ch2: 120,
          ch3: 40
        },
        grid: {
          left: 50, // 左边距离
          right: 15, // 右边距离
          top: 50,
          bottom: 6,
          containLabel: true

        },
        legends: ["红色", "橙色", "黄色", "蓝色"],
        legendPosition: "",
        legFontSize: 12,
        tooltipdw: "",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: [],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              // x轴文字的配置
              show: true,
              interval: 0, // 使x轴上的文字显示完全,
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "数量:(个)",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: []
      },
      sign: "",
      Seleoptions: [],
      pid: ""
    };
  },
  computed: {
    startPickerOptions() {
      return {
        disabledDate: (time) => {
          return this.formInline.startTime && time.getTime() < new Date(this.formInline.startTime).getTime();
        }
      };
    },
    endPickerOptions() {
      return {
        disabledDate: (time) => {
          return this.formInline.endTime && time.getTime() > new Date(this.formInline.endTime).getTime();
        }
      };
    }
  },
  mounted() {
    // this.chart1 = this.$echarts.init(document.getElementById("zzt"));
    this.getUnitTree();
    setTimeout(() => {
      this.bntHandel();
    }, 500);
    this.initCharts();
    // 饼图
    // this.Histogram(); // 柱状图

  },
  created() {
    this.list();
    // 当前日期
    const d = new Date();
    // 获取当前日期的前三个月的月份
    const pastMonth = d.getMonth() - 3;
    // 修改月份，如果前三个月对应没有该日期，则向后延顺
    d.setMonth(pastMonth);
    this.formInline.startTime = this.formatDate(d);
    this.formInline.endTime = this.formatDate(new Date());
  },
  methods: {
    formatDate(val) {
      const date = new Date(val);
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    async getUnitTree() {
      const res = await getLevelCitys({ orgId: JSON.parse(sessionStorage.getItem("org")).orgId });
      const option = res.map((i) => {
        return {
          label: i.orgName,
          value: i.id
        };
      });
      this.Seleoptions = option;
      this.sign = this.Seleoptions[0].label;
      this.pid = option[0].value;
      this.bntHandel(option[0].value);
    },
    bntHandels() {
      this.showBarChartsy = false;
      this.initCharts();
      this.bntHandel();

    },
    selectChange(item) {
      this.showBarChartsy = false;
      this.bntHandel(item);
      this.$nextTick(() => {
        this.initCharts();
        // this.Histogram();
      });
    },
    async bntHandel(val) {
      const params = {
        startTime: this.formInline.startTime,
        endTime: `${this.formInline.endTime} 23:59:59`,
        unitId: this.pid
      };
      if (val) {
        params.unitId = val;
      }
      const res = await getStatistics(params);

      const data = [
        { value: 0, name: "红色", order: 1 },
        { value: 0, name: "橙色", order: 2 },
        { value: 0, name: "黄色", order: 3 },
        { value: 0, name: "蓝色", order: 4 }
      ];
      let pie_total = 0;
      if (res.pie.length && res.columnar.length) {
        this.shows = true;
        data.forEach(item => {
          res.pie.forEach(pieitem => {
            if (item.order == pieitem.order) {
              item.value = pieitem.number;
              item.name = pieitem.wln;
            }
          });
        });
        pie_total = res.pie.reduce(function (total, currentValue, currentIndex, arr) {
          return total + currentValue.number;
        }, 0);
        this.pie_total = pie_total;
        this.data = data;
        this.initCharts();
        this.xAxisData = res.columnar.map(item => item.dangerName);
        this.option3.xAxis[0].data = this.xAxisData;
        const datas = res.columnar.map((item) => {
          const arr = [item.redCount ? item.redCount : 0, item.orangeCount ? item.orangeCount : 0, item.yellowCount ? item.yellowCount : 0, item.blueCount ? item.blueCount : 0];
          return arr;
        });
        this.option3.series = datas;
        this.showBarChartsy = true;
      } else {
        this.shows = false;
        this.xAxisData = res.columnar.map(item => item.dangerName);
        this.option3.xAxis[0].data = this.xAxisData;
        const datas = res.columnar.map((item) => {
          const arr = [item.redCount ? item.redCount : 0, item.orangeCount ? item.orangeCount : 0, item.yellowCount ? item.yellowCount : 0, item.blueCount ? item.blueCount : 0];
          return arr;
        });
        this.option3.series = datas;
        this.showBarChartsy = true;
      }


    },
    // 列表
    async list() {
      const parmas = {
        pageNum: 1,
        pageSize: 10
      };
      const res = await listPages(parmas);
      this.tableData = res.data.filter(item => (item.warningInfoStatus !== "0"));
    },
    initCharts() {
      this.$Highcharts.chart("RightLine", {
        chart: {
          type: "pie",
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          },
          backgroundColor: "transparent",
          marginTop: -50,
          marginLeft: 30
        },
        title: {
          text: ""
        },
        credits: {
          enabled: false
        },
        tooltip: {
          formatter() {
            return `<div><span style="font-size: 14px;color:${this.point.color}">●</span><span style="font-size: 14px;color:#fff">${this.point.name}:</span><span style="color:#fff;font-size: 14px" >${this.point.y}</span></div>`;
          },
          backgroundColor: "rgba(22,66,120)",
          style: {
            color: "#fff",
            fontSize: "14px"
          }
        },
        subtitle: {
          floating: true,
          text: `<span style="font-size:25px;font-weight:bold;color:#fff">${this.pie_total}</span><br/><span style="font-size:14px;color:#fff">总数</span>`,
          x: 0,
          y: 120
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: "pointer",
            depth: 55,
            dataLabels: {
              enabled: false,
              // format: '{point.name}<br/>{point.y}',
              formatter: function () {
                if (this.percentage > 0) { return `<span style="font-size:14px;font-weight:bold;color:${this.point.color}">${this.point.name}</span><br/><span style="font-size:14px;color:${this.point.color}">${this.point.y}</span>`; }
              },
              style: {
                color: "#Fff",
                fontSize: "14px"
              }
            }, states: {
              inactive: {
                opacity: 1
              }
            }

          }
        },
        colors: [
          "#FA585A",
          "#F5885C",
          "#FEDF6E",
          "#258FE9"
        ],
        series: [{
          size: "80%",
          innerSize: "60%",
          type: "pie",
          data: [
            [this.data[0].name, this.data[0].value === 0 ? null : this.data[0].value],
            [this.data[1].name, this.data[1].value === 0 ? null : this.data[1].value],
            [this.data[2].name, this.data[2].value === 0 ? null : this.data[2].value],
            [this.data[3].name, this.data[3].value === 0 ? null : this.data[3].value]
          ]
        }]
      });
      // this.pie = this.$echarts.init(document.getElementById("RightLine")); // 图标初始化
      // this.pie.setOption(option); // 渲染页面
      // // 随着屏幕大小调节图标
      // window.addEventListener("resize", () => {
      //   this.pie.resize();
      // });
    },
    Histogram() {
      const data1 = this.four_data;
      const data2 = this.three_data;
      const data3 = this.two_data;
      const data4 = this.one_data;
      const datas = [data1, data2, data3, data4];
      const obj = {};
      datas.reduce((pre, cur, index) => {
        if (index === 4) return [];
        pre = cur.map((item, i) => pre[i] ? pre[i] + item : item);
        obj[`data${index + 1}`] = pre;
        return pre;
      }, []);
      this.chart1.setOption(
        {
          tooltip: {
            trigger: "item",
            axisPointer: {
              type: "shadow"
            },
            backgroundColor: "rgba(0,24,34,0.25)",
            borderWidth: 0,
            textStyle: {
              color: "#fff"
            },
            formatter(params) {

              const finishedCount = data1[params.dataIndex];
              const unFinishedCount = data2[params.dataIndex];
              const finishedCount1 = data3[params.dataIndex];
              const unFinishedCount1 = data4[params.dataIndex];
              return `<div style='display: flex;align-items: center;width: 100px'>${params.name}</div>
              <div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #278dec;border-radius: 50%;margin-right: 10px'></div>蓝色: ${finishedCount}</div>
              <div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #ffb400;border-radius: 50%;margin-right: 10px'></div>黄色: ${unFinishedCount}</div>
              <div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #fb6421;border-radius: 50%;margin-right: 10px'></div>橙色: ${finishedCount1}</div>
              <div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #ff0048;border-radius: 50%;margin-right: 10px'></div>红色: ${unFinishedCount1}</div>`;
            }
          },
          grid: {
            top: "22%",
            right: "5%",
            bottom: "20%",
            left: "5%"
          },
          xAxis: {
            data: this.xAxis_data,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              rotate: 30,
              textStyle: {
                // color: "#9ed2f9"
                color: "#fff"
              },
              margin: 20 // 刻度标签与轴线之间的距离。
            }
          },
          yAxis: [
            {
              splitNumber: 10,
              name: "数量",
              nameTextStyle: {
                color: "#fff",
                aligh: "left"
              },
              min: 0,
              // max: 7,
              interval: 2,
              splitLine: {
                // 网格线
                lineStyle: {
                  type: "dashed", // 设置网格线类型 dotted：虚线   solid:实线
                  color: "rgba(16,64,119)"// 网格线颜色
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff"
                }
              }
            }
          ],
          series: [
            {
              name: "蓝色",
              data: datas[0],
              type: "bar",
              stack: "plan",
              barWidth: 30,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#278dec"
                    },
                    {
                      offset: 1,
                      color: "#5cbcff"
                    }
                  ]
                }
              }
            },
            {
              name: "黄色",
              data: datas[1],
              type: "bar",
              stack: "plan",
              barWidth: 30,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#ffb400"
                    },
                    {
                      offset: 1,
                      color: "#fbd180"
                    }
                  ]
                }
              }
            },
            {
              name: "橙色",
              data: datas[2],
              type: "bar",
              stack: "plan",
              barWidth: 30,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#fb6421 "
                    },
                    {
                      offset: 1,
                      color: "#ffa882"
                    }
                  ]
                }
              }
            },
            {
              name: "红色",
              data: datas[3],
              type: "bar",
              stack: "plan",
              barWidth: 30,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#ff0048"
                    },
                    {
                      offset: 1,
                      color: "#F1A2A2"
                    }
                  ]
                }
              }
            },
            {
              data: [0, 0, 0, 0, 0, 0],
              type: "pictorialBar",
              symbol: "diamond",
              symbolOffset: [0, "50%"],
              symbolSize: [30, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: "#5cbcff"
                }
              }
            },
            {
              data: obj.data1,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [30, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#278dec"
                      },
                      {
                        offset: 1,
                        color: "#5cbcff"
                      }
                    ]
                  }
                }
              }
            },
            {
              data: obj.data2,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [30, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#ffb400"
                      },
                      {
                        offset: 1,
                        color: "#fbd180"
                      }
                    ]
                  }
                }
              }
            },
            {
              data: obj.data3,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [30, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#fb6421 "
                      },
                      {
                        offset: 1,
                        color: "#ffa882"
                      }
                    ]
                  }
                }
              }
            },
            {
              data: obj.data4,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [33, 12],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#ff0048"
                      },
                      {
                        offset: 1,
                        color: "#F1A2A2"
                      }
                    ]
                  }
                }
              }
            }
          ]
        }
      );
    },
    goList() {
      this.$router.push({
        name: "InformationList"
      });
    }
  }
};
</script>

<style scoped lang="less">
:deep(.el-table th.el-table__cell > .cell) {
  color: rgb(255, 255, 255) !important;
}

.Emergency-tb-bt-center {
  margin-right: 32px;
  height: 58px;

  .select-class .el-select {
    width: 150px !important;
  }

  :deep(.el-select) {
    width: 200px !important;

  }

  :deep(.el-input__suffix) {
    top: 4px;
  }
}

.Emergency {
  height: 95%;
  // padding: 0px 20px;
  margin: 0;

  :deep(div::-webkit-scrollbar-thumb) {
    border-radius: 10px;
    box-shadow: none;
    background-color: transparent;
  }

  :deep(div::-webkit-scrollbar-track) {
    border-radius: 0;
    background: transparent;
    border: none;
  }

  /deep/.el-select-dropdown__item {
    background: none !important;
  }

  :deep(.el-empty) {
    padding: 100px 0 !important;
  }

  // .customSelect {
  //   :deep(.el-select--small) {
  //     min-width: 200px !important;
  //   }

  //   :deep(.el-select-dropdown__wrap .el-scrollbar__wrap) {
  //     background-color: red !important;
  //   }

  //   :deep(.el-input__suffix) {
  //     top: 6px !important;
  //   }

  //   :deep(.el-select-dropdown__item) {
  //     background: none !important;
  //   }

  //   :deep(.el-select-dropdown) {
  //     border: none !important;
  //     border-radius: 4px !important;
  //     background: none !important;
  //     margin: 0 !important;
  //   }

  //   :deep(.el-select-dropdown__wrap .el-scrollbar__wrap) {
  //     margin-bottom: 0;
  //     margin-right: -27px;
  //   }
  // }

  :deep(.el-table--border::after, .el-table--group::after) {
    width: 0;
  }

  :deep(.el-table .cell) {
    padding-right: 0;
    padding-left: 0;
    line-height: normal;
  }

  //鼠标悬浮样式
  :deep(tr.hover-row) {

    &,
    &.el-table__row--striped {

      &,
      &.current-row {
        >td.el-table__cell {
          background-color: transparent;
        }
      }
    }
  }

  .legend_pie {
    position: absolute;
    left: 22%;
    bottom: 5%;
    display: flex;
    align-items: center;
    transform: translateX(-50%);

    div {
      color: #fff;
    }
  }

  .pie_bottom {
    display: inline-block;
    text-align: center;
    height: 15px;
    width: 20px;
    line-height: 16px;
    border-radius: 3px;
  }

  /deep/ .el-table__body {
    color: #fff !important;
  }

  /deep/ .el-table td {
    border-bottom: 0px solid #dfe6ec !important;
    // padding: 6px 0 !important;
  }

  /deep/ .el-table th {
    border-bottom: 0px solid #dfe6ec !important;
  }

  :deep(div::-webkit-scrollbar) {
    width: 5px;
  }

  :deep(.gutter) {
    background-color: transparent !important;
    border: none !important;
  }

  :deep(.el-table) {
    border: none;
  }

  /deep/ .el-table__fixed::before {
    background: none;
  }

  // :deep(.el-table__fixed) {
  //   position: static !important;
  // }
  .Emergency-tb-zzt /deep/ .el-table tr {
    background-color: transparent !important;
    border: none;
  }

  :deep(.el-table) {
    &::before {
      height: 0px;
    }
  }

  .cell {
    color: rgb(255, 255, 255);
  }

  .el-table--border::after,
  .el-table--group::after {
    width: 0px;
    height: 0px;
  }

  :deep(div::-webkit-scrollbar-thumb) {
    border-radius: 10px;
    box-shadow: none;
    background-color: transparent;
  }

  :deep(div::-webkit-scrollbar-track) {
    border-radius: 0;
    background: transparent;
    border: none;
  }

  :deep(.el-table, .el-table__expanded-cell) {
    background-color: transparent;
  }

  .customer-table .el-table__fixed-right::before,
  .el-table__fixed::before {
    width: 0;
  }

  :deep(.el-table__body tr:hover > td) {
    background: none !important;
  }

  :deep(.el-table, .el-table__expanded-cell) {
    .background-row {
      background: rgba(255, 255, 255, 0.2);
    }

    background-color: transparent;

    .el-table__body-wrapper.is-scrolling-left {
      height: 482px;
    }

    .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
      background: rgba(255, 255, 255, 0.2);
    }

    .el-table td {
      border-bottom: none;
      color: #fff;
      font-size: 16px;
    }

    .el-table th {
      border-bottom: none;
    }

    .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
      background-color: transparent;
    }
  }

  :deep(.el-table__footer-wrapper tbody td.el-table__cell, .el-table__header-wrapper tbody td.el-table__cell) {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
  }

  :deep(.el-table.bottomTable) {
    font-size: 12px;
    margin-top: 5px;

    div.cell {
      padding-left: 0;
      padding-right: 0;
      font-size: 12px;
    }

    th.el-table__cell {
      background-color: #265cff;
    }
  }

  :deep(.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td) {
    background-color: rgba(255, 255, 255, 0.2);
    /*隔行变色*/
  }

  .half {
    width: 50%;
    display: flex;

    :deep(.el-form-item__content) {
      flex: 1 !important;
    }

    :deep(.el-select) {
      width: 100% !important;
    }

    :deep(.el-input) {
      width: 100% !important;
    }

    :deep(.el-date-editor) {
      width: 100% !important;
    }
  }

  :deep(.el-table__row) {
    font-size: 16px;
  }

  :deep(.has-gutter) {
    font-size: 16px !important;
  }

  :deep(.el-breadcrumb) {
    font-size: 16px;
    line-height: initial;
  }

  :deep(.el-breadcrumb__inner.is-link) {
    font-weight: 100;
    color: #fff;
  }

  :deep(.el-form-item__label) {
    font-size: 16px;
  }

  :deep(.el-button) {
    font-size: 16px;
  }

  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #3270ff;
  }

  .Emergency-center {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .Emergency-dt {
      width: 49%;
      height: 65%;
      box-sizing: border-box;
      padding: 2px;
      border-radius: 5px;
      border: #3270ff 1px solid;
    }

    .Emergency-tb {
      width: 50%;
      height: 65%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .Emergency-tb-bd {
        width: 100%;
        height: 10%;
        border: rgba(10, 73, 187) 1px solid;
        border-radius: 2px;

        .flexBetweens {
          align-items: center;
        }

        :deep(.el-form) {
          margin-top: 5px;
        }

        :deep(.el-button--primary) {
          border: none;
        }

        :deep(.el-form-item__label) {
          font-family: PingFang SC;
          font-weight: 400;
          font-style: normal;
          color: #eeeeee;
        }

        :deep(.el-form-item__content) {
          width: 60%;
        }

        :deep(.el-input__inner) {
          background-color: transparent !important;
          border: rgba(10, 73, 187) 1px solid;
          color: #fff;
        }
      }

      .Emergency-tb-bt {
        width: 100%;
        height: 85%;
        border: rgba(10, 73, 187) 1px solid;
        border-radius: 2px;

        :deep(.el-input__inner) {
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          border: rgba(10, 73, 187) 1px solid;
          border-radius: 5px;
          color: #eeeeee;
          background-color: #174ad5;
          margin-top: 15px;
        }

        :deep(.el-cascader .el-input .el-icon-arrow-down) {
          margin-top: 15px;
        }

        :deep(.el-select__caret) {
          color: #fff;
          font-size: 16px;
        }

        .Emergency-tb-bt-bottom-tb {
          width: 100%;
          height: 90%;
          display: flex;
        }
      }
    }

    .Emergency-tb-zzt {
      width: 100%;
      height: 33%;
      // background-color: #eeeeee;
      border: rgba(10, 73, 187) 1px solid;

      .Emergency-tb-bt-titel {
        background: none;
        height: 12% !important;
      }
    }
  }
}
</style>
